<template>
	<div>
		<banner 
			:bannerTitle="bannerTitle"
			:bannerImg="bannerImg" 
			:gallaryImgs="gallaryImgs"
		></banner>
		<detail-header></detail-header>
		<div class="content">
			<detail-list :list="list"></detail-list>
		</div>
	</div>
</template>

<script>
	import Banner from './components/Banner.vue'
	import detailHeader from './components/Header.vue'
	import detailList from './components/List.vue'
	import request from '../../unit/request.js'

	export default{
		name:'Detail',
		components:{
			Banner,
			detailHeader,
			detailList
		},
		data(){
			return {
				bannerTitle:'',
				bannerImg:'',
				gallaryImgs:[],
				list:[]
			}
		},
		mounted(){
			this.getDetailInfo()
		},
		methods:{
			getDetailInfo(){
				request({
					url:'/static/mock/detail.json',
					method:'get',
					params:{
						id:this.$route.params.id
					}
				}).then(this.getDetailInLook)
			},
			getDetailInLook(res){
				console.log(res)
				res=res.data
				if (res.ret==true && res.data) {
					const data=res.data
					this.bannerTitle=data.sightName
					this.bannerImg=data.bannerImg;
					this.gallaryImgs=data.gallaryImgs
					this.list=data.categoryList
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.content
		height:50rem
</style>